<script setup lang="ts">
import { 
  Layout, 
  Menu, 
  Carousel, 
  Card, 
  Statistic, 
  Row, 
  Col, 
  Button, 
  Avatar, 
  Typography 
} from 'ant-design-vue'

const { Header, Content, Footer } = Layout
const { Title, Paragraph } = Typography

// 导航菜单数据
const menuItems = [
  { key: '1', label: '首页' },
  { key: '2', label: '产品' },
  { key: '3', label: '服务' },
  { key: '4', label: '关于我们' },
  { key: '5', label: '联系我们' },
]

// 轮播图数据
const carouselItems = [
  {
    title: '欢迎使用 Tiny Fairy Lab',
    description: '探索前沿科技，创造无限可能',
    image: 'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
  },
  {
    title: '创新技术解决方案',
    description: '为您的业务提供全方位的技术支持',
    image: 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
  },
  {
    title: '专业团队，优质服务',
    description: '我们拥有行业领先的技术专家团队',
    image: 'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
  },
]

// 功能卡片数据
const featureCards = [
  {
    title: '云计算服务',
    description: '提供灵活、安全、高效的云计算解决方案',
    icon: '☁️',
  },
  {
    title: '人工智能',
    description: '利用AI技术为您的业务赋能',
    icon: '🤖',
  },
  {
    title: '大数据分析',
    description: '挖掘数据价值，助力业务决策',
    icon: '📊',
  },
  {
    title: '区块链技术',
    description: '构建安全、透明的分布式应用',
    icon: '🔗',
  },
]

// 统计数据
const statistics = [
  { title: '客户数量', value: 10000, suffix: '+' },
  { title: '项目经验', value: 500, suffix: '+' },
  { title: '技术专家', value: 100, suffix: '+' },
  { title: '合作企业', value: 200, suffix: '+' },
]
</script>

<template>
  <Layout class="app-layout">
    <!-- 头部导航 -->
    <Header class="app-header">
      <div class="header-content">
        <div class="logo">
          <Avatar icon="🌸" size="large" />
          <span class="logo-text">Tiny Fairy Lab</span>
        </div>
        <Menu 
          mode="horizontal" 
          :items="menuItems" 
          class="nav-menu"
          :selectedKeys="['1']"
        />
        <div class="header-actions">
          <Button type="primary" size="middle">联系我们</Button>
        </div>
      </div>
    </Header>

    <!-- 主要内容 -->
    <Content class="app-content">
      <!-- 轮播图 -->
      <Carousel autoplay effect="fade" class="hero-carousel">
        <div v-for="(item, index) in carouselItems" :key="index" class="carousel-item">
          <img :src="item.image" alt="轮播图" class="carousel-image" />
          <div class="carousel-caption">
            <Title :level="1">{{ item.title }}</Title>
            <Paragraph>{{ item.description }}</Paragraph>
            <Button type="primary" size="large">了解更多</Button>
          </div>
        </div>
      </Carousel>

      <!-- 统计数据 -->
      <div class="statistics-section">
        <Row :gutter="[16,16]">
          <Col v-for="(stat, index) in statistics" :key="index" :span="6">
            <Card hoverable>
              <Statistic 
                :title="stat.title" 
                :value="stat.value" 
                :suffix="stat.suffix" 
                :valueStyle="{ color: '#1890ff' }"
              />
            </Card>
          </Col>
        </Row>
      </div>

      <!-- 功能卡片 -->
      <div class="features-section">
        <Title :level="2" class="section-title">我们的服务</Title>
        <Row :gutter="[16,16]">
          <Col v-for="(feature, index) in featureCards" :key="index" :span="6">
            <Card hoverable class="feature-card">
              <div class="feature-icon">{{ feature.icon }}</div>
              <Title :level="4">{{ feature.title }}</Title>
              <Paragraph>{{ feature.description }}</Paragraph>
              <Button type="link">查看详情 &gt;</Button>
            </Card>
          </Col>
        </Row>
      </div>

      <!-- 产品展示 -->
      <div class="products-section">
        <Title :level="2" class="section-title">精选产品</Title>
        <Row :gutter="[16,16]">
          <Col :span="8">
            <Card hoverable>
              <template #cover>
                <img alt="产品1" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />
              </template>
              <Card.Meta 
                title="智能数据分析平台" 
                description="实时处理海量数据，提供精准分析报告"
              />
            </Card>
          </Col>
          <Col :span="8">
            <Card hoverable>
              <template #cover>
                <img alt="产品2" src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png" />
              </template>
              <Card.Meta 
                title="企业资源管理系统" 
                description="一体化管理企业人财物，提升运营效率"
              />
            </Card>
          </Col>
          <Col :span="8">
            <Card hoverable>
              <template #cover>
                <img alt="产品3" src="https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png" />
              </template>
              <Card.Meta 
                title="客户关系管理系统" 
                description="全面管理客户信息，提升客户满意度"
              />
            </Card>
          </Col>
        </Row>
      </div>
    </Content>

    <!-- 页脚 -->
    <Footer class="app-footer">
      <div class="footer-content">
        <div class="footer-logo">
          <Avatar icon="🌸" />
          <span>Tiny Fairy Lab</span>
        </div>
        <div class="footer-links">
          <div class="footer-column">
            <h4>关于我们</h4>
            <p>公司简介</p>
            <p>团队介绍</p>
            <p>企业文化</p>
          </div>
          <div class="footer-column">
            <h4>产品服务</h4>
            <p>技术解决方案</p>
            <p>咨询服务</p>
            <p>培训服务</p>
          </div>
          <div class="footer-column">
            <h4>联系我们</h4>
            <p>电话：400-123-4567</p>
            <p>邮箱：contact@tinyfairylab.com</p>
            <p>地址：北京市海淀区科技园</p>
          </div>
        </div>
        <div class="footer-copyright">
          © 2024 Tiny Fairy Lab. 保留所有权利。
        </div>
      </div>
    </Footer>
  </Layout>
</template>

<style scoped>
.app-layout {
  min-height: 100vh;
}

/* 头部样式 */
.app-header {
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 64px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
  color: #1890ff;
}

.logo-text {
  font-size: 18px;
}

.nav-menu {
  flex: 1;
  margin: 0 40px;
}

/* 轮播图样式 */
.hero-carousel {
  height: 500px;
  position: relative;
}

.carousel-item {
  position: relative;
  height: 100%;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.carousel-caption h1 {
  color: #fff;
  font-size: 48px;
  margin-bottom: 16px;
}

/* 内容区域样式 */
.app-content {
  padding: 40px 24px;
  background-color: #f5f5f5;
}

.statistics-section,
.features-section,
.products-section {
  margin-bottom: 40px;
  padding: 24px;
  background-color: #fff;
  border-radius: 8px;
}

.section-title {
  text-align: center;
  margin-bottom: 32px;
  color: #333;
}

/* 功能卡片样式 */
.feature-card {
  text-align: center;
  height: 100%;
}

.feature-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

/* 页脚样式 */
.app-footer {
  background-color: #001529;
  color: #fff;
  padding: 40px 0;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
  font-size: 18px;
  font-weight: bold;
}

.footer-links {
  display: flex;
  justify-content: space-around;
  margin-bottom: 32px;
}

.footer-column h4 {
  color: #fff;
  margin-bottom: 16px;
  font-size: 16px;
}

.footer-column p {
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 8px;
  cursor: pointer;
  transition: color 0.3s;
}

.footer-column p:hover {
  color: #1890ff;
}

.footer-copyright {
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
  font-size: 14px;
}
</style>
